{% extends "base.html" %}

{% set current_menu = 'customer' %}
{% set current_page = 'customer_list' %}

{% block title %}客户管理 - 客户列表{% endblock %}

{% block page_title %}{% endblock %}
{% block page_subtitle %}{% endblock %}

{% block content %}
<div class="container mx-auto">
    <!-- 面包屑导航 -->
    <nav class="text-sm breadcrumbs mb-6">
        <ol class="flex items-center space-x-2">
            <li><a href="{{ url_for('main.home') }}" class="text-gray-500 hover:text-gray-700">首页</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li><a href="{{ url_for('customer.list_customers') }}" class="text-gray-500 hover:text-gray-700">客户管理</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li class="text-gray-700">客户列表</li>
        </ol>
    </nav>



    <!-- 操作区域 -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="p-4 border-b border-gray-200">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                <div class="flex items-center space-x-2 mb-4 md:mb-0">
                    <a href="{{ url_for('customer.create_customer') }}" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition">
                        <i class="fas fa-plus mr-2"></i>添加客户
                    </a>
                    <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition">
                        <i class="fas fa-file-import mr-2"></i>批量导入
                    </button>
                    <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition">
                        <i class="fas fa-file-export mr-2"></i>批量导出
                    </button>
                </div>
                <div class="flex items-center space-x-2">
                    <div class="relative">
                        <input type="text" id="search" placeholder="搜索客户名称、编号、地址..." 
                               class="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                               value="{{ search }}">
                        <div class="absolute left-3 top-2.5 text-gray-400">
                            <i class="fas fa-search"></i>
                        </div>
                    </div>
                    <button id="search-btn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition">
                        搜索
                    </button>
                </div>
            </div>
        </div>

        <!-- 筛选区域 -->
        <div class="p-4 border-b border-gray-200">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">客户来源</label>
                    <select id="source-filter" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        <option value="">全部来源</option>
                        {% for value, label in sources %}
                        <option value="{{ value }}" {% if source_filter == value %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">客户分类</label>
                    <select id="category-filter" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        <option value="">全部分类</option>
                        {% for value, label in categories %}
                        <option value="{{ value }}" {% if category_filter == value %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">客户归属地</label>
                    <select id="location-filter" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        <option value="">全部归属地</option>
                        {% for value, label in locations %}
                        <option value="{{ value }}" {% if location_filter == value %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">省份</label>
                    <select id="province-filter" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        <option value="">全部省份</option>
                        {% for province in provinces %}
                        <option value="{{ province[0] }}" {% if province_filter == province[0] %}selected{% endif %}>{{ province[1] }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="mt-4 flex justify-end">
                <button id="filter-btn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition">
                    查询
                </button>
                <button id="reset-btn" class="ml-2 px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition">
                    重置
                </button>
            </div>
        </div>

        <!-- 客户列表表格 -->
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            <input type="checkbox" id="select-all" class="rounded border-gray-300 text-primary focus:ring-primary">
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            客户名称
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            客户编号
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            客户分类
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            客户来源
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            客户归属地
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            地址
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            负责人
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            最后跟进时间
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for customer in customers.items %}
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <input type="checkbox" class="customer-checkbox rounded border-gray-300 text-primary focus:ring-primary" value="{{ customer.id }}">
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div>
                                <div class="text-sm font-medium text-gray-900">
                                    <a href="{{ url_for('customer.view_customer', customer_id=customer.id) }}" class="hover:text-primary">{{ customer.name }}</a>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ customer.customer_number }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                {% if customer.category == '企业客户' %}bg-blue-100 text-blue-800
                                {% elif customer.category == '个人客户' %}bg-green-100 text-green-800
                                {% elif customer.category == '政府机构' %}bg-purple-100 text-purple-800
                                {% elif customer.category == '事业单位' %}bg-yellow-100 text-yellow-800
                                {% else %}bg-gray-100 text-gray-800{% endif %}">
                                {{ customer.category }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ customer.source }}
                            {% if customer.source_other %}({{ customer.source_other }}){% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ customer.location }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {% if customer.province %}{{ customer.province.name }}{% endif %}
                            {% if customer.city %}{{ customer.city.name }}{% endif %}
                            {% if customer.district %}{{ customer.district.name }}{% endif %}
                            {% if customer.address %}{{ customer.address }}{% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ customer.manager.name if customer.manager else '未分配' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {% if customer.followups %}
                                {{ customer.followups[0].created_at | format_time }}
                            {% else %}
                                暂无跟进
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <div class="flex space-x-2">
                                <a href="{{ url_for('customer.view_customer', customer_id=customer.id) }}" class="text-primary hover:text-blue-600">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ url_for('customer.edit_customer', customer_id=customer.id) }}" class="text-indigo-600 hover:text-indigo-900">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <button class="delete-customer text-red-600 hover:text-red-900" data-id="{{ customer.id }}" data-name="{{ customer.name }}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="10" class="px-6 py-4 text-center text-sm text-gray-500">
                            暂无客户数据
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- 分页 -->
        <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                <div>
                    <p class="text-sm text-gray-700">
                        显示 <span class="font-medium">{{ (page - 1) * per_page + 1 }}</span> 到 <span class="font-medium">{{ min(page * per_page, total_customers) }}</span> 条，
                        共 <span class="font-medium">{{ total_customers }}</span> 条记录
                    </p>
                </div>
                <div>
                    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                        {% if page > 1 %}
                        <a href="{{ url_for('customer.list_customers', page=page-1, **request.args) }}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <span class="sr-only">上一页</span>
                            <i class="fas fa-chevron-left"></i>
                        </a>
                        {% else %}
                        <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400">
                            <span class="sr-only">上一页</span>
                            <i class="fas fa-chevron-left"></i>
                        </span>
                        {% endif %}
                        
                        {% for p in range(max(1, page-2), min(total_pages+1, page+3)) %}
                        {% if p == page %}
                        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white">
                            {{ p }}
                        </span>
                        {% else %}
                        <a href="{{ url_for('customer.list_customers', page=p, **request.args) }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            {{ p }}
                        </a>
                        {% endif %}
                        {% endfor %}
                        
                        {% if page < total_pages %}
                        <a href="{{ url_for('customer.list_customers', page=page+1, **request.args) }}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <span class="sr-only">下一页</span>
                            <i class="fas fa-chevron-right"></i>
                        </a>
                        {% else %}
                        <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400">
                            <span class="sr-only">下一页</span>
                            <i class="fas fa-chevron-right"></i>
                        </span>
                        {% endif %}
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div id="delete-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3 text-center">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                <i class="fas fa-exclamation-triangle text-red-600"></i>
            </div>
            <h3 class="text-lg leading-6 font-medium text-gray-900 mt-4">删除客户</h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500">
                    确定要删除客户 "<span id="delete-customer-name"></span>" 吗？此操作不可撤销。
                </p>
            </div>
            <div class="items-center px-4 py-3">
                <form id="delete-form" method="post">
                    <input type="hidden" id="delete-customer-id" name="customer_id">
                    <button type="button" id="cancel-delete" class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md w-24 mr-2 hover:bg-gray-400">
                        取消
                    </button>
                    <button type="submit" class="px-4 py-2 bg-red-600 text-white text-base font-medium rounded-md w-24 hover:bg-red-700">
                        删除
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
{{ super() }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 搜索功能
        const searchBtn = document.getElementById('search-btn');
        const searchInput = document.getElementById('search');
        
        searchBtn.addEventListener('click', function() {
            const searchValue = searchInput.value.trim();
            const url = new URL(window.location.href);
            if (searchValue) {
                url.searchParams.set('search', searchValue);
            } else {
                url.searchParams.delete('search');
            }
            window.location.href = url.toString();
        });
        
        // 筛选功能
        const filterBtn = document.getElementById('filter-btn');
        const resetBtn = document.getElementById('reset-btn');
        const sourceFilter = document.getElementById('source-filter');
        const categoryFilter = document.getElementById('category-filter');
        const locationFilter = document.getElementById('location-filter');
        const provinceFilter = document.getElementById('province-filter');
        
        filterBtn.addEventListener('click', function() {
            const url = new URL(window.location.href);
            
            // 保留搜索参数
            const searchValue = searchInput.value.trim();
            if (searchValue) {
                url.searchParams.set('search', searchValue);
            } else {
                url.searchParams.delete('search');
            }
            
            // 设置筛选参数
            if (sourceFilter.value) {
                url.searchParams.set('source', sourceFilter.value);
            } else {
                url.searchParams.delete('source');
            }
            
            if (categoryFilter.value) {
                url.searchParams.set('category', categoryFilter.value);
            } else {
                url.searchParams.delete('category');
            }
            
            if (locationFilter.value) {
                url.searchParams.set('location', locationFilter.value);
            } else {
                url.searchParams.delete('location');
            }
            
            if (provinceFilter.value) {
                url.searchParams.set('province', provinceFilter.value);
            } else {
                url.searchParams.delete('province');
            }
            
            window.location.href = url.toString();
        });
        
        resetBtn.addEventListener('click', function() {
            // 重置所有筛选条件
            sourceFilter.value = '';
            categoryFilter.value = '';
            locationFilter.value = '';
            provinceFilter.value = '';
            searchInput.value = '';
            
            // 跳转到基础URL
            window.location.href = "{{ url_for('customer.list_customers') }}";
        });
        
        // 删除确认模态框
        const deleteModal = document.getElementById('delete-modal');
        const deleteCustomerName = document.getElementById('delete-customer-name');
        const deleteCustomerId = document.getElementById('delete-customer-id');
        const deleteForm = document.getElementById('delete-form');
        const cancelDelete = document.getElementById('cancel-delete');
        
        document.querySelectorAll('.delete-customer').forEach(button => {
            button.addEventListener('click', function() {
                const customerId = this.getAttribute('data-id');
                const customerName = this.getAttribute('data-name');
                
                deleteCustomerId.value = customerId;
                deleteCustomerName.textContent = customerName;
                
                // 设置表单提交URL
                deleteForm.action = `/customers/${customerId}/delete`;
                
                deleteModal.classList.remove('hidden');
            });
        });
        
        cancelDelete.addEventListener('click', function() {
            deleteModal.classList.add('hidden');
        });
        
        // 点击模态框外部关闭
        deleteModal.addEventListener('click', function(e) {
            if (e.target === deleteModal) {
                deleteModal.classList.add('hidden');
            }
        });
        
        // 全选功能
        const selectAll = document.getElementById('select-all');
        const customerCheckboxes = document.querySelectorAll('.customer-checkbox');
        
        selectAll.addEventListener('change', function() {
            customerCheckboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
        });
    });
</script>
{% endblock %}